<!-- 弹窗组件 -->
<template>
  <el-dialog v-model="dialogFormVisible" :title="info?.name?'修改':'新增'" with="30%" @close="$emit('closeAdd')" draggable="true">
    <!-- 使用三元表达式控制标题展示 -->
    <el-form :model="form" ref="ruleFormRef" label-width="60px" :rules="rules">
      <el-form-item label="时间" prop="date">
        <el-input v-model="form.date" type="date" placeholder="请选择一个时间" :disabledDate="disabledDate"/>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address"/>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input v-model="form.order"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeAdd(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="save(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import {ref,Ref,computed,watch, reactive} from "vue"
import User from "../class/User"
import { FormInstance,FormRules } from "element-plus";
import { add, edit } from "../http";
import { ElMessage } from 'element-plus'
const prop=defineProps({//内置的传参工具  接收使用prop传递过来的数据
    isShow:Boolean,//对于接收的类型进行控制
    info:User
})
const ruleFormRef=ref<FormInstance>()

const disabledDate=(time:any)=>{//最大时间从今天开始
    const _maxTime=Date.now()-24*60*60*1000*1
    return time.getTime()<=_maxTime
}
const dialogFormVisible=computed(()=>prop.isShow)//表单的展示与隐藏绑定在isShow上
const rules=reactive<FormRules>({//对表单进行数据校验 FormRules表单验证规则对象
  date:[{
    type:'date',
    required:true,
    message:'请选择一个时间',
    trigger:'chang',
  }],
  name:[{
    required:true,message:'请输入名称',trigger:'blur'
  }],
  address:[{
    required:true,message:'请输入地址',trigger:'blur'
  }],
  order:[
    {required:true,message:'请输入一个序号'},
    {type:'string',message:'该字段必须是数字'}
  ]
})
const form:Ref<User>=ref<User>({//声明使用User类
    id:"",
    date:"",
    name:"",
    address:"",
    order:0
})
watch(()=>prop.info,(newInfo)=>{
    if(newInfo){
        form.value={
            id:newInfo.id,
            date:newInfo.date,
            name:newInfo.name,
            address:newInfo.address,
            order:newInfo.order 
        }
    }
})

const emits=defineEmits(["closeAdd","success"])
// TODO 不懂这两行什么意思 突然觉得前端也没那么简单
const closeAdd=async (formE1:FormInstance|undefined)=>{
  if(!formE1) return
  formE1.resetFields()//表单的重置
   emits("closeAdd")//触发关闭事件
   
}
const save=async (formE1:FormInstance|undefined)=>{//经表单校验？？
  if(formE1) return //如何校验成功
  await formE1!.validate((valid,fields)=>{
    if(valid){
     
      if(form.value.id){
        edit(form.value).then(function (res){
          if(res.data){
            emits("success","修改成功！")
          }
          else{
            ElMessage.error("操作失败！")
          }
        })
      }else{
        add(form.value).then(function(res){
          if(res.data){
            emits("success","添加成功！")
          }else{
            console.log('error submit',fields);
            
          }
        })
      }
    }
  })
    emits("success")
}


</script>

<style scoped lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>